[id]/opengraph-image.tsx
基本信息
- 类型: Next.js Open Graph 图片生成
- 路径:
./src/app/prompts/[id]/opengraph-image.tsx
功能描述
为Prompt详情页面生成Open Graph图片，用于社交媒体分享时显示预览。功能包括：
- 动态生成1200x630像素的分享图片
- 显示Prompt标题、类型、分类、内容预览
- 显示品牌名称和投票数
- 显示作者信息和头像
- 显示贡献者数量
- 针对图片类型Prompt显示预览图
- 支持结构化Prompt的格式显示
- 使用应用主题配置的颜色
路由
- 路径:
/prompts/[id]/opengraph-image - 动态参数:
- id: Prompt ID（支持格式：abc123、abc123_some-slug）
组件类型
- Server Component (ImageResponse)
导出配置
alt: "Prompt Preview"size: { width: 1200, height: 630 }contentType: "image/png"
依赖
next/og(ImageResponse)@/lib/db@/lib/config
类型样式
| 类型 | 标签 | 颜色 |
|---|---|---|
| TEXT | Text Prompt | #3b82f6 |
| IMAGE | Image Prompt | #8b5cf6 |
| VIDEO | Video Prompt | #ec4899 |
| AUDIO | Audio Prompt | #f59e0b |
| STRUCTURED | Structured | #10b981 |